﻿<!-- apps/xxx/components/CategoryList.vue -->
<template>
  <div class="category-list" v-loading="loading">
    <!-- 空态 -->
    <el-empty v-if="!safeList.length && !loading" description="暂无内容" />

    <!-- 列表 -->
    <el-scrollbar v-else class="list-scroll">
      <ul class="list">
        <li v-for="it in safeList" :key="it.id" class="row">
          <!-- 左侧图标 -->
          <!-- <i class="doc-icon" /> -->
          <base-icon class="row-icon" name="iconfont-general gen-doc" :size="16" color="var(--row-color)" />
          <!-- 中部标题与时间 -->
          <div class="meta" @click="onSelect(it)">
            <div class="title text-ellipsis" :title="it.title">{{ it.title || "未命名标题" }}</div>
            <div class="time">{{ it.updateTime || "" }}</div>
          </div>
        </li>
      </ul>
    </el-scrollbar>
  </div>
</template>

<script setup>
  const props = defineProps({
    // 内容数组：[{ id,title,content,updateTime }]
    list: { type: Array, default: () => [] },
    // 加载态
    loading: { type: Boolean, default: false },
    // 默认是否自动选中第一条（选中后会 emit）
    autoSelectFirst: { type: Boolean, default: true },
  });

  const emit = defineEmits(["select"]);

  const activeId = ref("");

  // 避免 undefined
  const safeList = computed(() => (Array.isArray(props.list) ? props.list : []));

  // 首次/列表变化时，自动选中第一条
  // watch(
  //   safeList,
  //   arr => {
  //     if (props.autoSelectFirst && arr.length) {
  //       const first = arr[0];
  //       activeId.value = String(first?.id ?? "");
  //       emit("select", first);
  //     } else if (!arr.length) {
  //       activeId.value = "";
  //     }
  //   },
  //   { immediate: true }
  // );

  function onSelect(item) {
    activeId.value = String(item?.id ?? "");
    emit("select", item);
  }
</script>

<style lang="scss" scoped>
  .category-list {
    height: 100%;
    box-sizing: border-box;
    padding: 0 12px;

    .list-scroll {
      height: 100%;
    }

    .list {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .row {
      /* 统一控制本行的主色（标题+图标）*/
      --row-color: var(--ct3);
      --row-title-color: var(--ct1);
      display: grid;
      grid-template-columns: 18px 1fr auto;
      align-items: flex-start; /* 顶齐到上沿，避免图标跟整块居中 */
      column-gap: 8px;
      padding: 14px 0;
      border-bottom: 1px solid var(--cb1);
      cursor: pointer;

      &:hover {
        background: #e5e6eb;
        // background: var(--bd9);
        // --row-color: var(--bd); /* hover 时图标与标题一起变色 */
        --row-color: #5947f1;
        // --row-title-color: var(--bd);
        --row-title-color: #5947f1;
      }

      /* 让图标跟标题第一行“平齐” */
      .row-icon {
        align-self: flex-start; /* 单独顶齐 */
        margin-top: 2px; /* 微调：1~3px 视视觉需要可调 */
        line-height: 1;
        flex-shrink: 0;
      }

      .meta {
        display: flex;
        flex-direction: column;
        gap: 6px;

        .title {
          font-size: 16px;
          line-height: 22px; /* 第一行基线更稳 */
          color: var(--row-title-color); /* 与图标同色 */
          font-weight: 500;
          max-width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .time {
          font-size: 12px;
          color: #8a8ea3;
          line-height: 18px;
        }
      }
    }
  }
</style>
